<template>
 <div>
  <el-breadcrumb separator="/">
  <el-breadcrumb-item  v-for="(item,index) in $route.matched" :key="index">
    <router-link :to='item.path || "/" '>{{item.meta.crumbs}}</router-link>
  </el-breadcrumb-item>
</el-breadcrumb>
 <el-table class='tableBox' :data="postData" style="width: 100%">
   <!-- 在table里面数据遍历在内部已经帮我们完成 我们要做的就是拿到数据展示 -->
   <el-table-column
        prop="date"
        label="ID"
        width="80">
        <template slot-scope="scope">
          <!-- 定义一个变量名 他就相当于之前遍历数据的时候的item 后面加上你想要的插值属性 -->
        <span>{{ scope.row.id }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span>{{ scope.row.create_date.slice(0,10) }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="作者"
        width="180"
        >
        <template slot-scope="scope">
        <span>{{ scope.row.user.nickname }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="标题">
         <template slot-scope="scope">
        <span>{{ scope.row.title }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="address"
        width="180px"
        label="操作">
         <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEditPost(scope.row.id)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeletePost(scope.row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class='pager'>
      <!-- pageSize 改变时会触发 点击切换页面文章数目-->
      <!-- currentPage 改变时会触发	我们需要拿到点前点击的按钮索引 发起文章请求 -->
      <el-pagination
  background
  layout="total,sizes,prev, pager, next,jumper"
  :total="total" 
  :page-sizes="[2,5,8,10]"
  :page-size="pageSize"
  @size-change="changeSize"
  @current-change='nextPageIndex'
  >
</el-pagination>
    </div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      postData: [],
      total: null,
      pageIndex: 1,
      pageSize: 5
    }
  },
  mounted() {
    this.initPost()
  },
  methods: {
    // 请求全部文章
    // 使用async await 异步请求来处理数据获取后的操作
    async initPost() {
      const res = await this.$axios({
        url: '/post',
        method: 'get',
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
      const { data, total } = res.data
      // 数组反转
      this.postData = data.reverse()
      // 将获取到的文章数据总数保存
      this.total = Number(total)
      // .then(res => {
      //   // console.log(res.data)

      // })
    },
    // 切换下一页
    nextPageIndex(index) {
      // console.log(index)
      // 监听翻页按钮事件 将页码的index保存 调用请求数据方法
      this.pageIndex = index
      this.initPost()
    },
    // 显示不同数量文章
    changeSize(postSize) {
      // console.log(postSize)
      this.pageSize = postSize
      this.initPost()
    },
    // 输入页码跳转页面
    // handleCurrentChange(pageIndex) {
    //   console.log(pageIndex)
    // },
    // 编辑文章
    handleEditPost(id) {
      console.log(id)
      this.$router.push({
        path: '/compile/',
        query: { id: id }
      })
    },
    // 伪装删除文章
    handleDeletePost(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table--fit {
  margin-top: 20px;
}
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
</style>